<html>
<head>
	<meta charset="UTF-8">
	<title>PHP Directory Lister</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container bs-docs-container">
		<nav class="navbar navbar-default" role="navigation">
		  <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		      <span class="sr-only">Toggle navigation</span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		    </button>
		    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;Directory Lister</a>
		  </div>

		  <!-- Collect the nav links, forms, and other content for toggling -->
		  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		    <ul class="nav navbar-nav">
		      <li class="active"><a href="/">Home</a></li>
		      <li><a href="#">About</a></li>
		      <li class="dropdown">
		        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		        <ul class="dropdown-menu">
		          	<li><a href="#">Action</a></li>
		          	<li><a href="#">Another action</a></li>
		          	<li><a href="#">Something else here</a></li>
		          	<li class="divider"></li>
		        	<li><a href="#">Separated link</a></li>
		    	    <li class="divider"></li>
			        <li><a href="#">One more separated link</a></li>
	        	</ul>
	      	</li>
	    	</ul>

	    	<ul class="nav navbar-nav navbar-right">
	      	<li><button class="download-btn btn btn-primary" data-toggle="modal" data-target="#myModal">立即下载</button></li>
	    	</ul>
	  	</div><!-- /.navbar-collapse -->
		</nav>
		<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
		<div class="row">
			<div class="col-md-3">
				<div class="bs-sidebar hidden-print affix" role="complementary">
					<div class="list-group">
						<a class="list-group-item" href="#intro">介绍<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
						<a class="list-group-item" href="#install">安装<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
						<a class="list-group-item" href="#troubleshooting">常见问题<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
						<a class="list-group-item" href="#faq">FAQ<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
						<a class="list-group-item" href="#contact">联系<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
					</div>
				</div>
			</div>
			<div class="col-md-9" role="main">			
				<div class="page-header">
				  <img src="images/directory-lister-win.png" class="img-responsive" alt="Responsive image">
				</div>
		</div>
	</div>
</body>
</html>